*{
	padding: 0;
	margin: 0;
}
html,body,#app{
	width: 100%;
	min-width: 1200px;
	font-size: 16px;
	font-family: "Microsoft YaHei","微软雅黑";
	overflow: auto;
}
div{
	box-sizing: border-box;
}
.text-cut{
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.text-line-cut{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.width100{
	width: 100%;
}
.block{
	display: block;
}
.line-block{
	display: inline-block;
}
.hide{
	display: none;
}
.text-index2{
	text-indent: 2em;
}
// 字体颜色、背景色
@colorName: white, violet, light-violet, light-purple, grey-purple, gray, dark-grey, dark-gray, black, rose-red, light-oragen, rose-red1, rose-red2 , light-blue, light-green, light-red, pure-red, orange, green, light-gray, pink, gray-blue, dark-blue, sky-blue, dark-green;
@colorList: white, #8962ff, #8e5dff, #c49ef9, #99a3f8, #666666, #333333, #9ba3b1, #000000, #ff00f0, #ee9a96, #ff2dd5, #f14080, #6d9fff, #38d21e, #ff3a3a, #ff5858, #ff902d, #2ccc4a, #e1e2e3, #df87ff, #9ab9ff, #4b74d0, #13b6b6, #239b4a;
.colorLoop(@index) when(@index<51){
	@name: extract(@colorName, @index);
	.text-@{name} {
		color: extract(@colorList, @index);
	}
	.bg-@{name} {
		background: extract(@colorList, @index);
	}
	.colorLoop(@index+1);
}
.colorLoop(0);

.text-left {
	text-align: left;
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}
// 字号
.FontLoop(@index) when(@index<51){
	.font-@{index} {
		font-size: unit(@index, px);
	}
	.FontLoop(@index+1);
}
.FontLoop(0);
.bold{
	font-weight: bold;
}
.flex{
	display: flex;
}
.flex-row {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.flex-col {
	display: flex;
	flex-direction: column;
}
.flex-wrap {
	flex-wrap: wrap;
}
.flex-nowrap {
	flex-wrap: nowrap;
}
.col-center {
	align-items: center;
}
.col-top {
	align-items: flex-start;
}
.col-bottom {
	align-items: flex-end;
}
.row-center {
	justify-content: center;
}
.row-left {
	justify-content: flex-start;
}
.row-right {
	justify-content: flex-end;
}
.row-between {
	justify-content: space-between;
}
.row-around {
	justify-content: space-around;
}
// 内外边距
.mpLoop(@index) when(@index<100){
	.margin-t-@{index} {
		margin-top: unit(@index, px);
	}
	.margin-r-@{index} {
		margin-right: unit(@index, px);
	}
	.margin-b-@{index} {
		margin-bottom: unit(@index, px);
	}
	.margin-l-@{index} {
		margin-left: unit(@index, px);
	}
	.margin-lr-@{index} {
		margin-left: unit(@index, px);
		margin-right: unit(@index, px);
	}
	.margin-tb-@{index} {
		margin-top: unit(@index, px);
		margin-bottom: unit(@index, px);
	}
	.padding-t-@{index} {
		padding-top: unit(@index, px);
	}
	.padding-r-@{index} {
		padding-right: unit(@index, px);
	}
	.padding-b-@{index} {
		padding-bottom: unit(@index, px);
	}
	.padding-l-@{index} {
		padding-left: unit(@index, px);
	}
	.padding-lr-@{index} {
		padding-left: unit(@index, px);
		padding-right: unit(@index, px);
	}
	.padding-tb-@{index} {
		padding-top: unit(@index, px);
		padding-bottom: unit(@index, px);
	}
	
	.mpLoop(@index+1);
}
.mpLoop(0);
.pointer{
	cursor: pointer;
}
.rela{
	position: relative;
}
.abso{
	position: absolute;
}
.abso-center{
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.border-right{
	border-right: 1px solid #f4f4f4;
}
.border-bottom{
	border-bottom: 1px solid #f4f4f4;
}
.img-middle{
	vertical-align: middle;
}
.padding-trbl-20{
	padding: 20px;
}
.exportBtn{
	right: 10px;
	height: 40px;
	line-height: 40px;
	border-radius: 5px;
}
.maskBox{
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	background: rgba(0, 0, 0, .8);
	z-index: 99;
	.maskContentBox{
		width: 70%;
		height: 70%;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.maskContent{
		padding-bottom: 200px;
	}
}
.repeatContentBox{
	width: 80%;
	min-height: 100px;
	left: 10%;
	padding: 15px;
	background: rgba(0, 0, 0, .8);
	border-radius: 5px;
	.repeatContent{
		-webkit-line-clamp: 15;
	}
	.sanjiao_down{
		width:0;
		height:0;
		overflow:hidden;
		font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
		line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
		border-left: 20px solid transparent;
		border-right: 20px solid transparent;
		bottom: -20px;
		left: 20%;
	}
}

